<template>
  <el-container class="main-container">
    <div class="top2-div">
      <!--      <div class="logo-div">-->
      <!--        <img src="/src/assets/images/logo.png" style="width: 100%;position: center"/>-->
      <!--      </div>-->
      <div class="search-div">
        <div class="flex-grow" style="flex-grow: 1;"/>
        <el-input v-model="input"
                  style="width: 600px; height: 50px; font-size: 18px;"
                  placeholder="搜索职位、公司"
                  size="large"/>
        <el-button type="primary"
                   style="height: 50px; font-size: 18px; text-align: center"
                   :icon="Search"
                   size="large"
                   @click="searchMassage(input)">搜索
        </el-button>
        <div class="flex-grow" style="flex-grow: 1;"/>
      </div>
      <!-- 热门职位标签 -->
      <div style="display: flex; margin-top: 10px">
        <div class="flex-grow" style="flex-grow: 1;"/>
        <el-text size="large">热门职位：</el-text>
        <!-- 标签 -->
        <div style="display: flex; padding: 10px 5px;">
          <el-tag type="warning" effect="light" style="margin-right: 5px; font-size: 14px"
                  v-for="item in hotJob" key="item" size="large"
                  @click="hotClick(item)">
            {{ item }}
          </el-tag>
        </div>
        <div class="flex-grow" style="flex-grow: 1;"/>
      </div>
    </div>
    <div class="center-menu">
      <!-- 分类 -->
      <el-card class="left-classify" shadow="never">
        <ul>
          <li v-for="item in classify" :key="item.id" class="classify-item">
            <!--            <p v-for="i in item.lei">{{i}}</p>-->
            <img v-lazy="item.img" style="width: 20px; height: 20px; padding-right: 5px"/>
            <el-text v-for="(i, index) in item.lei" :key="index">
              <el-text v-show="index!=0" size="large">|</el-text>
              <el-text @click="searchClassify(i)" size="large">{{ i }}</el-text>
            </el-text>
          </li>
        </ul>
      </el-card>
      <!-- 轮播图 -->
      <div class="right-item">
        <el-carousel height="300px">
          <el-carousel-item v-for="item in rightImgs" :key="item.id">
            <img :src="item.src" height="100%" width="100%"/>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <h1 style="text-align: center; margin: 20px 0">精选职位</h1>
    <div class="main-pane">
      <el-tabs v-model="paneName" class="post-tab" @tab-click="changePane">
        <el-tab-pane label="全部职位" name="pane1" style="display: flex; flex-wrap: wrap;">
          <!-- 职位卡片 -->
          <el-card v-for="item in allJobList" key="item.id"
                   style="min-width: 49%;border-radius: 10px; margin: 5px 5px"
                   @click="allJobClick(item.id, item.jobName)">
            <!-- 职业名称、薪资 -->
            <div style="display: flex">
              <el-text size="large" style="font-size: 22px;font-weight: bold">{{ item.jobName }}</el-text>
              <!-- 职业名称 -->
              <div style="flex-grow: 1"></div>
              <el-text style="font-size: 18px; font-weight: bold; color: #f26d49; float: right;">{{
                  item.salary
                }}
              </el-text>
              <!-- 薪资 -->
            </div>
            <!-- 标签 -->
            <div style="display: flex; padding: 10px 5px">
              <el-tag v-show="item.educationRequire!==''&&item.educationRequire!==null" style="margin-right: 5px">
                {{ item.educationRequire }}
              </el-tag>
              <el-tag v-show="item.ageRequire!==''&&item.ageRequire!==null" style="margin-right: 5px">{{
                  item.ageRequire
                }}
              </el-tag>
              <el-tag v-for="i in item.skillRequire" v-show="item.skillRequire!==null&&item.skillRequire!=''" key="i"
                      style="margin-right: 5px">{{ i }}
              </el-tag>
            </div>
            <!-- 底部信息 -->
            <template #footer>
              <div style="display:flex; margin:0 20px">
                <el-text size="large">{{ item.hrName }}</el-text>
                <div style="flex-grow: 1"></div>
                <el-text size="large">
                  {{ item.companyName }}
                  <el-divider direction="vertical"/>
                  {{ item.companyAddress }}
                </el-text>
              </div>
            </template>
          </el-card>
          <div style="width:100%; display: flex; margin: 20px 0 50px 0">
            <div class="flex-grow" style="flex-grow: 1;"/>
            <el-button plain style="width: 200px; font-size: 16px; height: 40px" type="primary" @click="lookAllJob">
              查看更多
            </el-button>
            <div class="flex-grow" style="flex-grow: 1;"/>
          </div>
        </el-tab-pane>
        <el-tab-pane label="推荐职位" name="pane2" style="display: flex; flex-wrap: wrap;">
          <!-- 职位卡片 -->
          <el-card v-for="item in recommendJobList" key="item.id"
                   style="min-width: 49%;border-radius: 10px; margin: 5px 5px"
                   @click="recommendJobClick(item.id, item.jobName)">
            <!-- 职业名称、薪资 -->
            <div style="display: flex">
              <el-text size="large" style="font-size: 22px;font-weight: bold">{{ item.jobName }}</el-text>
              <!-- 职业名称 -->
              <div style="flex-grow: 1"></div>
              <el-text style="font-size: 18px; font-weight: bold; color: #f26d49; float: right;">{{
                  item.salary
                }}
              </el-text>
              <!-- 薪资 -->
            </div>
            <!-- 标签 -->
            <div style="display: flex; padding: 10px 5px">
              <el-tag style="margin-right: 5px">{{ item.educationRequire }}</el-tag>
              <el-tag style="margin-right: 5px">{{ item.ageRequire }}</el-tag>
              <el-tag v-for="i in item.skillRequire" v-show="!item.skillRequire===null" key="i"
                      style="margin-right: 5px">{{ i }}
              </el-tag>
            </div>
            <!-- 底部信息 -->
            <template #footer>
              <div style="display:flex; margin:0 20px">
                <el-text size="large">{{ item.hrName }}</el-text>
                <div style="flex-grow: 1"></div>
                <el-text size="large">
                  {{ item.companyName }}
                  <el-divider direction="vertical"/>
                  {{ item.companyAddress }}
                </el-text>
              </div>
            </template>
          </el-card>
          <div style="width:100%; display: flex; margin: 20px 0 50px 0">
            <div class="flex-grow" style="flex-grow: 1;"/>
            <el-button plain style="width: 200px; font-size: 16px; height: 40px" type="primary"
                       @click="lookRecommendJob">换一批
            </el-button>
            <div class="flex-grow" style="flex-grow: 1;"/>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="dialog">
      <!-- 弹窗  反馈 -->
      <el-dialog
          v-model="feedbackDialog"
          :append-to-body="true"
          :close-on-click-modal="false"
          :lock-scroll="false"
          class="el-dialog"
          title="反馈"
      >
        <el-form
            ref="formRef"
            :model="feedbackDialog"
            class="demo-dynamic"
            label-width="auto"
            style="max-width: 600px"
        >
          <el-form :model="inform" label-width="auto">
            <el-form-item label="推荐职位是否符合用户的求职意向和专业方向：" prop="problem1" required>
              <el-radio-group v-model="inform.problem1" class="ml-4" @click="isNoInput=false">
                <el-radio value="1">是</el-radio>
                <el-radio value="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="推荐职位的薪资待遇是否符合用户的期望：" prop="problem2" required>
              <el-radio-group v-model="inform.problem2" class="ml-4" @click="isNoInput=false">
                <el-radio value="1">是</el-radio>
                <el-radio value="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="推荐职位的地理位置是否符合用户的就业地点偏好：" prop="problem3" required>
              <el-radio-group v-model="inform.problem3" class="ml-4" @click="isNoInput=false">
                <el-radio value="1">是</el-radio>
                <el-radio value="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="推荐职位的工作内容与用户的技能、经验是否匹配：" prop="problem4" required>
              <el-radio-group v-model="inform.problem4" class="ml-4" @click="isNoInput=false">
                <el-radio value="1">是</el-radio>
                <el-radio value="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="反馈意见：">
              <el-input v-model="inform.feedback" type="textarea"/>
            </el-form-item>
          </el-form>
        </el-form>
        <template #footer>
          <el-alert v-show="isNoInput" :closable="false" title="有必填项未填写" type="error" />
          <div class="dialog-footer">
            <el-button @click="feedbackDialog = false">取消</el-button>
            <el-button type="primary" @click="onSubmit">
              确定
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </el-container>
  <div style="text-align: right;">
    <el-affix :offset="120" position="bottom">
      <el-tooltip
          class="box-item"
          content="推荐数据反馈"
          effect="dark"
          placement="bottom"
      >
        <el-button style="margin-right: 40px;background-color: #f26d49;height: 50px;width: 50px"
                   @click="feedbackDialog=true">
          <el-image src="/src/assets/images/icons/feedback.png" style="width: 48px"></el-image>
        </el-button>
      </el-tooltip>
    </el-affix>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import axios from "axios"
import {Delete, Edit, Search, Share, Upload} from '@element-plus/icons-vue'
import {useRoute, useRouter} from 'vue-router';
import {seekerApi} from "../../../api/app";
import mitt from "../../../router/mitt";
import {ElMessage} from "element-plus";

const router = useRouter();

const paneName = ref("pane1") // 标签页
// 轮播图
const rightImgs = [
  {id: '6', src: '/src/assets/images/icons/right4.png'},
  {id: '5', src: '/src/assets/images/icons/right5.png'},
  {id: '4', src: '/src/assets/images/icons/right6.png'},
  {id: '1', src: '/src/assets/images/icons/right7.jpg'},
  {id: '2', src: '/src/assets/images/icons/right8.jpg'},
  {id: '3', src: '/src/assets/images/icons/right9.jpg'},
]
//分类
const classify = [
  {id: '1', lei: ["销售 ", "市场 ", "客服 ", "贸易"], img: "/src/assets/images/icons/icon1.png"},
  {id: '2', lei: ["经管 ", "人事 ", "行政 ", "财务"], img: "/src/assets/images/icons/icon2.png"},
  {id: '3', lei: ["生产 ", "质管 ", "技工 ", "物流"], img: "/src/assets/images/icons/icon3.png"},
  {id: '4', lei: ["教育 ", "法律 ", "咨询 ", "翻译"], img: "/src/assets/images/icons/icon4.png"},
  {id: '5', lei: ["零售 ", "家政 ", "餐饮 ", "旅游"], img: "/src/assets/images/icons/icon5.png"},
  {id: '6', lei: ["广告 ", "媒体 ", "艺术 ", "出版"], img: "/src/assets/images/icons/icon6.png"},
  {id: '7', lei: ["IT ", "互联网 ", "通信"], img: "/src/assets/images/icons/icon7.png"},
]
//热门职位
const hotJob = ['后端开发', 'web前端开发', '软件测试', '软件架构师', '运维工程师'];

const input = ref('') //搜索框内容

//自造数据
const recommendJobList = ref()
const allJobList = ref()

// 在组件挂载后执行回调函数
onMounted(() => {
  getRecommend()
  getData()
})


const size = ref(6)
const page = ref(1)
const tatol = ref(1)
const getRecommend = () =>{
  seekerApi.searchJob(
      {
        size: size.value,
        page: page.value,
        name: "前端"
      })
      .then(reponse => {
        console.log("推荐数据：",reponse)
        tatol.value = reponse.total
        recommendJobList.value = reponse.data
      }).catch(error => {
    console.log(error)
  })
}

const getData = () => {
  seekerApi.getSomeJob({
    size: 6,
    page: 1
  })
      .then(reponse => {
        console.log(reponse)
        allJobList.value = reponse.data
      }).catch(error => {
    console.log(error)
  })
}

const hotClick = (key) => {
  searchMassage(key)
}

//改变标签页
const changePane = () => {
  // console.log(tab)
  if (paneName.value === 'pane1') {
    onMounted(null)
  }
}

//搜索职业
const searchMassage = (key) => {

  // console.log("mitt中的内容", mitt.all)
  mitt.emit('index', '/seekerMain/searchMain')
  router.push({name: "SearchMain", query: {key: key, add: '', type: '', exp: '', edu: ''}})
}
//根据分类搜索
const searchClassify = (key) => {
  searchMassage(key)
}

//点击查看推荐职业详细信息
const recommendJobClick = (id, jobName) => {
  console.log("推荐职业 id：" + id)
// router.push({name:"seekerJobMessage", params:{id:id}})
  const newWindow = window.open("/seekerMain/seekerJobMessage/" + id, '_blank')
  // 等待页面加载完成后设置标题
  newWindow.onload = function () {
    newWindow.document.title = jobName;
  };
}
//点击查看推荐职业详细信息
const allJobClick = (id, jobName) => {
  console.log("全部职业 id：" + id + " 名称：" + jobName)
  // router.push({name:"seekerJobMessage", params:{id:id}})
  const newWindow = window.open("/seekerMain/seekerJobMessage/" + id, '_blank')
  // 等待页面加载完成后设置标题
  newWindow.onload = function () {
    newWindow.document.title = jobName;
  };
}
//点击换一批---推荐职业
const lookRecommendJob = () => {
  console.log(page.value,tatol.value)
  if(page.value*size.value>=tatol.value){
    page.value = 1
  } else {
    page.value = page.value + 1
  }
  getRecommend()
}
//点击查看更多---全部职业
const lookAllJob = () => {
  router.push("searchMain")
}

//反馈
const inform = ref({
  id: 0,
  userId: 0,
  userNick: "",
  feedbackTime: "",
  problem1: "",
  problem2: "",
  problem3: "",
  problem4: "",
  feedback: ""
})
const feedbackDialog = ref(false)
const isNoInput = ref(false)

const onSubmit = () => {
  if (
      inform.value.problem1 === '' ||
      inform.value.problem2 === '' ||
      inform.value.problem3 === '' ||
      inform.value.problem4 === ''
  ) {
    isNoInput.value = true
  } else {
    inform.value.userNick = JSON.parse(localStorage.getItem('seeker')).userNick
    inform.value.userId = JSON.parse(localStorage.getItem('seeker')).id
    seekerApi.addFeedback(inform.value)
        .then((reponse) => {
          console.log(reponse)
          if (reponse.code === 200) {
            isNoInput.value = false;
            inform.value = {id: 0,userId: 0, userNick: "", feedbackTime: "", problem1: "",
              problem2: "", problem3: "", problem4: "", feedback: ""}
            ElMessage({
              message: '反馈成功',
              type: 'success',
            })
          } else {
            ElMessage.error('反馈失败')
          }
          feedbackDialog.value = false
        })
        .catch((error) => {
          console.log(error)
        })
  }
}
</script>

<style scoped>
.main-container {
  display: flex;
  flex-direction: column;
  margin: 0 120px;
  padding: 0;
  /*background-color: black;*/
  min-height: 760px;
}

.top2-div {
  display: flex;
  flex-direction: column;
  padding: 0;
  margin-top: 30px;
}

.search-div {
  display: flex;
}

.center-menu {
  margin: 20px 0;
  display: grid;
  grid-template-areas: "l r r r";
}

.center-menu .left-classify {
  grid-area: l;
}

.center-menu .right-item {
  grid-area: r;
}

.center-menu .left-classify {
  border: #E1E1E1 1px solid;
  margin-right: 10px;
}

.center-menu .left-classify .classify-item {
  /*display: inline-block;*/
  margin-left: 17px;
  width: auto;
  border-bottom: 1px #E8E8E8 solid;
  line-height: 34px;
  cursor: pointer;
  list-style-type: none;
}

.post-tab > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>
